Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김창희] sprint2 #39

Conversation

changhui-chan
Copy link
Collaborator

@changhui-chan changhui-chan commented Aug 17, 2024

요구사항

기본

  • Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
  • Netlify에 파일 배포가 아닌 포크한 Github 레포지토리로 연결합니다.
  • 피그마 디자인에 맞게 페이지를 만들어 주세요.
  • React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
  • “판다마켓" 로고 클릭 시 루트 페이지로 이동합니다.
  • input 요소에 focus out 일 때, 테두리는 없습니다.
  • “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.
  • “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.
  • 아래로 스크롤 해도 상단 네비게이션 바(Global Navigation Bar)가 최상단에 고정됩니다.
  • SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

심화

  • palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
  • 비밀번호 input 요소 오른쪽에 눈모양 아이콘을 추가합니다.
    (추후 클릭으로 비밀번호를 보거나 가릴 수 있도록 기능을 만들어 갈 예정입니다. -> 해당 기능도 구현완료)

주요 변경사항

  • 자바스크립트 Fetch API를 이용하여 Html파일안에 다른 HTML파일을 불러오고, 불러온 HTML파일이 Header.html, Footer.html와 같이 특정 컴포넌트 HTML 파일을 불러와야한다면, 그것을 불러오게끔 JS 코드 구축. 즉, 완전한 리액트식 분리형 컴포넌트 구조 구축
  • 리액트식 컴포넌트 구조 도입에 따른 디렉토리, 파일 구조 수정
  • 각 종 에러 및 UI/UX 일부 수정
  • SMACSS 방법론 적용
  • 스프린트 2 미션 진행

앞으로 수정해야할 사항

  • 반응형 css
  • Failed to decode downloaded font: 주의 사항 해결

스크린샷

2

1

배포 사이트

https://cheerful-salamander-19dcbf.netlify.app

멘토에게

  • rem을 쓰고 있는데 html font-size를 10으로 고정을 시키면 어떻게 반응형으로 수정해야할지 모르겠습니다. 데스크탑은 p태그가 24px, 태블릿은 18px, 모바일은 16px 기준입니다. 미디어 쿼리로 다 따로 px로 지정을 해줘야하나요? 그렇다면 스프린트 1 미션은 아직 미디어 쿼리를 배우기 전인데 반응형 미션이 있습니다.

  • css에서 font-family 중복 사용 제거와 같이, 아직 미작업인 부분이 있습니다. 저번 코멘트의 수정 요청사항은 진행중입니다.

첫 번째 커밋
디렉토리 구조 수정
1. 스크롤 스크립트 삭제
2. button onclick="" 부분 a 태그 대체
3. 상대경로 -> 절대경로로 대체
4. 페이지별 title 수정
5. 이미지 파일 이름 스네이크 케이스로 수정
1. 경로 오류 사항 수정
2. 이미지 alt값 수정
3. SMACSS 방법론 적용 시도
4. SMACSS 방법론에 따른 클래스명 수정
1. 파비콘 삽입
2. 자바스크립트 Fetch API를 이용하여 Html파일안에 다른 HTML파일을 불러오고, 불러온 HTML파일이 Header.html, Footer.html와 같이 특정 컴포넌트 HTML 파일을 불러와야한다면, 그것을 불러오게끔 JS 코드 구축. 즉, 완전한 리액트식 분리형 컴포넌트 구조 구축
3. 리액트식 컴포넌트 구조 도입에 따른 디렉토리, 파일 구조 수정
4. 페이지별 title 및 링크 오류 수정
5. button 태그 안 a 태그 -> a 태그 안 button 태그 수정
6. 중복 이미지 파일 삭제

# 현재 발생되는 주의사항
Failed to decode downloaded font:
1. Header position을 sticky로 변경
2. login 페이지 코드 구현
3. 오류 사항 해결 - 현재 페이지 HTML 파일에서 컴포넌트 HTML 파일을 불러올 때, .outerHTML = data 형식을 취하는데, 보안상 data라는 string 형식에 <script> 코드가 있을시 해당 코드를 단순 string 취급한다. 따라서 <script> 적용 문제해결을 위해 data 변수의 string 형식에서 <script>의 text나 src의 내용을 찾아 다른 변수에 저장 후, createElement('script')를 통해 script를 따로 추가를 해줌
4. Home.html의 label을 h5로 수정
5. Footer.html의 li 태그 안 a 태그 -> a 태그 안 li 태그
1. Login.html 눈 아이콘 추가, 아이콘 토글 관련 기능 JS 코드 작성
2. signup 페이지 관련 html 파일들 구현 및 JS 코드 작성
1. login, signup 로고 여백 수정
1. 구글, 카카오톡 링크 연결
1. css 변수 등록
@changhui-chan changhui-chan added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Aug 17, 2024
@changhui-chan changhui-chan changed the title Basic 김창희 sprint2 [김창희] sprint2 Aug 17, 2024
@changhui-chan changhui-chan changed the base branch from main to Basic-김창희 August 18, 2024 01:43
@changhui-chan
Copy link
Collaborator Author

changhui-chan commented Aug 18, 2024

나중에 시도해볼 사항 :

  • Signup.html와 Login.html 코드가 중첩되는 부분이 많은데 컴포넌트로 따로 빼서 적용을 시킬 순 없을까? 그럼 css가 망가지려나?
  • singup layout.css와 login layout.css도 중첩되는 코드가 많은데 중첩되는 부분을 줄일 방법을 찾아보자
  • src디렉토리 밑에 파일을 만드니 홈페이지 주소가 src/로 시작함. 웹팩같은 빌더를 쓰면 주소에 src/를 제거할 수 있는데 안쓰고 제거할 수 있는 방법 없으려나 => 최종 index.html 파일이 src/index.html 형식으로 있었는데, 최상위 디렉토리로 빼고 /index.html 형식으로 수정하니 해결이 가능했음. 대신 하위 페이지 경로는 src가 붙어서 관련해서 해결방법을 모색할듯
  • 컨벤셔널 커밋 방식에 따른 커밋 시도

src 디렉토리 하위에 있었던 index.html 파일을 최상위 디렉토리 ('/')로 옮겨서 루트 경로가 'src/' 로 시작하는 것이 아닌 '/' 로 시작하게 함
Copy link
Collaborator

@GANGYIKIM GANGYIKIM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

창희님 이주차 미션 고생하셨습니다.
재사용을 고민하시고 새롬게 시도해보신것이 좋았습니다.
이런 경우 web component로 검색해보시면 작업하시는데 좋을 것 같습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Web_components#custom_elements

https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements


  • 동일한 내용에 대해서는 코드에서 한번만 코멘트를 답니다.
  • commit message를 적으실때 어떤 변경인지 알 수 있도록 해주시면 좋겠습니다.
  • rem을 쓰고 있는데 html font-size를 10으로 고정을 시키면 어떻게 반응형으로 수정해야할지 모르겠습니다. 데스크탑은 p태그가 24px, 태블릿은 18px, 모바일은 16px 기준입니다. 미디어 쿼리로 다 따로 px로 지정을 해줘야하나요? 그렇다면 스프린트 1 미션은 아직 미디어 쿼리를 배우기 전인데 반응형 미션이 있습니다. => 어떻게 반응형으로 수정해야 하냐는 질문에 대해 잘 감이 오지 않습니다. 예시로 들어주신 것에 대해 답변을 드리자면 html font-size: 10px 일 경우 p 태그는 PC 2.4rem, Tablet 1.8rem, Mob 1.6rem과 같은 식으로 입력해주시면됩니다. 만약 반응형작업시 화면 사이즈 별로 규칙이 있으면 기준 font-size를 변경해주셔도 되고, 불규칙하게 변경되면 일일히 변경해주셔야 합니다. 또한 아직 배우기전인 부분이라 심화요구사항에 있는 점 참고해주세요.

Comment on lines +9 to +12
<label class="label-font" for="email-tag">이메일</label>
<div class="input-content">
<input class="email-tag" autocomplete="off" id="email-tag" type="email" placeholder="이메일을 입력해주세요"
required>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2:
자동완성 기능 꺼주시고 라벨과 인풋을 연결하신거 좋습니다.
다만 focus시 영역이 인풋보다 작은 것 같아 가능하시면 수정되면 좋을 것 같습니다.

Comment on lines +57 to +62
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
<li
style="display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; background: white; border-radius: 9999px; border: 1px #F9FAFB">
<img src="/src/assets/img/ic_google.png" alt="구글 로그인">
</li>
</a>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
unordered list 의 list item 태그인 li는 ul의 바로 자식으로 있는 것이 더 가독성에 좋을 것 같습니다.

Suggested change
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
<li
style="display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; background: white; border-radius: 9999px; border: 1px #F9FAFB">
<img src="/src/assets/img/ic_google.png" alt="구글 로그인">
</li>
</a>
<li
style="display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; background: white; border-radius: 9999px; border: 1px #F9FAFB">
<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">
<img src="/src/assets/img/ic_google.png" alt="구글 로그인">
</a>
</li>

.then(data => {
element.outerHTML = data;
const loadEvent = new Event('load'); // Fetch로 삽입된 HTML파일은 load 이벤트를 발생시키지 않음
element.addEventListener('load', () => { // IncludeComponent.js의 일부코드
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
주석달아주신 것처럼 IncludeComponent.js와 비슷한 로직이 반복된다면
이를 함수로 빼서 두 파일에서 중복코드를 줄이시면 좋겠네요.

@@ -0,0 +1,39 @@
window.addEventListener('load', () => {
let allElements = document.getElementsByTagName('*');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2:

Suggested change
let allElements = document.getElementsByTagName('*');
const allElements = document.getElementsByTagName('*');

const passwordInput = document.querySelector('.password-tag');
const passwordIcon = document.querySelector('.password-icon');

const checkInputs = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2:
input의 값을 확인(if 문)하고 button disabled 상태를 변경해주는 것이니 이름을 더 적절하게 바꿔주시면 좋겠습니다.

@GANGYIKIM GANGYIKIM merged commit b137367 into codeit-bootcamp-frontend:Basic-김창희 Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants